<template>
    <div :class="[
        'pe-tag',
        `pe-tag-${size}`,
        `pe-tag-${type}`,
        `pe-tag-${effect}`,
        hit ? 'pe-tag-hit' : '',
        round ? 'pe-tag-round' : ''
    ]" :style="{ color }">
        <span class="pe-tag-text">
            <slot></slot>
        </span>
        <span v-if="closable" class="pe-tag-close" @click.stop="onClose" @mouseenter="closeFlag = false" @mouseleave="closeFlag = true">
            <Close v-if="closeFlag" />
            <CircleCloseFilled v-if="!closeFlag" />
        </span>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Close from "../../icons/close.vue";
import CircleCloseFilled from "../../icons/circleclosefilled.vue";

/**
 * @param type Tag 的类型
 * @param closeable 是否可关闭
 * @param hit 是否有边框描边
 * @param color 背景色
 * @param size Tag 的尺寸
 * @param effect Tag 的主题
 * @param round Tag 是否为圆形
 */
interface Props {
    type?: 'primary' | 'success' | 'info' | 'warning' | 'error',
    closable?: boolean,
    hit?: boolean,
    color?: string,
    size?: 'large' | 'default' | 'small',
    effect?: 'dark' | 'light' | 'plain',
    round?: boolean
}

withDefaults(defineProps<Props>(), {
    type: "primary",
    closable: false,
    hit: false,
    size: "default",
    effect: "light",
    round: false
})

const emits = defineEmits(["close"])

const closeFlag = ref<boolean>(true)

const onClose = () => {
    emits("close")
}
</script>

<script lang="ts">
export default {
    name: "pe-tag"
}
</script>